<template>
	<view class="wrap">
		<u-navbar title="股票自选" back-icon-color="#fff" :background="background" back-icon-size="36" title-color="#fff"
			title-size="34" :border-bottom="false">
			<view slot="right" class="slot-right">
				<button type="default" class="btn">
					<u-icon name="search" size="36" color="#fff"></u-icon>
				</button>
				<button type="default" class="btn">
					<u-icon name="grid" size="36" color="#fff"></u-icon>
				</button>
			</view>
		</u-navbar>
		<view class="content">
			<view class="ui-box">
				<view class="ui-pic">
					<image src="../../static/uview/images/bag.png" mode=""></image>
				</view>
				<view class="ui-content flex_bd">
					<view class="ui-hi">Hi,请你收下</view>
					<view class="ui-gift">最高11.36元专享礼</view>
					<button type="default" class="btn find-btn">立即查收</button>
				</view>
			</view>
			<view class="nav-bar">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item>
						<u-grid :col="5" :border="false">
							<u-grid-item :custom-style="customStyle" v-for="(item, index) in grid" :index="index"
								:key="index">
								<image :src="item.img" mode="" class="grid-icon"></image>
								<view class="grid-text">{{item.title}}</view>
								<view class="grid-tip">{{item.tip}}</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
					<swiper-item>
						<u-grid :col="5" :border="false">
							<u-grid-item :custom-style="customStyle" v-for="(item, index) in grid" :index="index"
								:key="index">
								<image :src="item.img" mode="" class="grid-icon"></image>
								<view class="grid-text">{{item.title}}</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
			<view class="work-bar">
				<swiper class="w-swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item>
						<view class="work-box">
							<view class="work-tag">
								<image src="../../static/uview/images/nav/tag.png" mode=""></image>
							</view>
							<view class="title">明星经理的生涯代表作</view>
							<view class="question">没想好选哪个基金吗</view>
							<view class="answer">那就认准明星基金经理</view>
							<button type="default" class="btn go-btn">立即上车</button>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="work-box">
							<view class="work-tag">
								<image src="../../static/uview/images/nav/tag.png" mode=""></image>
							</view>
							<view class="title">明星经理的生涯代表作</view>
							<view class="question">没想好选哪个基金吗</view>
							<view class="answer">那就认准明星基金经理</view>
							<button type="default" class="btn go-btn">立即上车</button>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="work-box">
							<view class="work-tag">
								<image src="../../static/uview/images/nav/tag.png" mode=""></image>
							</view>
							<view class="title">明星经理的生涯代表作</view>
							<view class="question">没想好选哪个基金吗</view>
							<view class="answer">那就认准明星基金经理</view>
							<button type="default" class="btn go-btn">立即上车</button>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="work-box">
							<view class="work-tag">
								<image src="../../static/uview/images/nav/tag.png" mode=""></image>
							</view>
							<view class="title">明星经理的生涯代表作</view>
							<view class="question">没想好选哪个基金吗</view>
							<view class="answer">那就认准明星基金经理</view>
							<button type="default" class="btn go-btn">立即上车</button>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="work-box">
							<view class="work-tag">
								<image src="../../static/uview/images/nav/tag.png" mode=""></image>
							</view>
							<view class="title">明星经理的生涯代表作</view>
							<view class="question">没想好选哪个基金吗</view>
							<view class="answer">那就认准明星基金经理</view>
							<button type="default" class="btn go-btn">立即上车</button>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="product">
				<view class="product-head flex-center">
					<image src="../../static/uview/images/text.png" class="logo" mode=""></image>
					<view class="product-dy">产品百里挑一 <view class="dot"></view> 深度调研超1000次</view>
				</view>
				<view class="product-body">
					<view class="tab-head flex">
						<view class="tab-width" style="width: 360rpx;">
							<u-tabs :list="tab" :is-scroll="false" :current="active" @change="change" height="70"
								font-size="28" inactive-color="#6d6d6d" active-color="#463521" bar-width="136"></u-tabs>
						</view>
					</view>
					<view class="tab-content">
						<view class="notice flex-center">
							<view class="title">产品主要投资股票，长期投资回报高，建议持有1~2年以上。</view>
							<view class="arrow-right">
								<u-icon name="arrow-right" size="24" color="#302414"></u-icon>
							</view>
						</view>
						<view class="tab-cells">
							<view class="tab-cell flex-center">
								<view class="tab-cell__hd">
									<image src="../../static/uview/images/tab1.png" mode=""></image>
								</view>
								<view class="tab-cell__bd flex_bd">
									<view class="name">新能源黑马基</view>
									<view class="stock">嘉实新能源新材料股票C</view>
									<view class="tab-row">
										<u-row>
											<u-col span="6">
												<view class="val text-danger">+<text>80.33</text>%</view>
												<view class="label">近1年涨跌幅</view>
											</u-col>
											<u-col span="6">
												<view class="val">前8%</view>
												<view class="label">业绩同类排名</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</view>
							<view class="tab-cell flex-center">
								<view class="tab-cell__hd">
									<image src="../../static/uview/images/tab1.png" mode=""></image>
								</view>
								<view class="tab-cell__bd flex_bd">
									<view class="name">借基把握新能源时代机遇</view>
									<view class="stock">嘉实智能汽车股票C</view>
									<view class="tab-row">
										<u-row>
											<u-col span="6">
												<view class="val text-danger">+<text>74.62</text>%</view>
												<view class="label">近1年涨跌幅</view>
											</u-col>
											<u-col span="6">
												<view class="val">前9%</view>
												<view class="label">业绩同类排名</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</view>
							<view class="tab-cell flex-center">
								<view class="tab-cell__hd">
									<image src="../../static/uview/images/tab1.png" mode=""></image>
								</view>
								<view class="tab-cell__bd flex_bd">
									<view class="name">超百万人信赖的科技明星</view>
									<view class="stock">信达澳银新能源产业股票</view>
									<view class="tab-row">
										<u-row>
											<u-col span="6">
												<view class="val text-danger">+<text>63.89</text>%</view>
												<view class="label">近1年涨跌幅</view>
											</u-col>
											<u-col span="6">
												<view class="val">前11%</view>
												<view class="label">业绩同类排名</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel-head">
					<view class="title">基金榜单</view>
					<view class="arrow-right">
						<u-icon name="arrow-right" size="24" color="#8c8c8c"></u-icon>
					</view>
				</view>
				<view class="jj-list">
					<view class="jj-cell flex-center">
						<image src="../../static/uview/images/j-icon1.png" class="icon" mode=""></image>
						<view class="flex_bd">
							<view class="name">本周销量TOP</view>
						</view>
						<view class="jj-list__ft">
							<view class="label">中欧医疗健康混合C</view>
							<view class="val">近1周购买<text>超30万人</text></view>
						</view>
					</view>
					<view class="jj-cell flex-center">
						<image src="../../static/uview/images/j-icon2.png" class="icon" mode=""></image>
						<view class="flex_bd">
							<view class="name">牛基业绩前茅</view>
						</view>
						<view class="jj-list__ft">
							<view class="label">中欧明睿新常态混合A</view>
							<view class="val">近1年涨跌幅<text>+92.32%</text></view>
						</view>
					</view>
					<view class="jj-cell flex-center">
						<image src="../../static/uview/images/j-icon3.png" class="icon" mode=""></image>
						<view class="flex_bd">
							<view class="name">安稳不操心</view>
						</view>
						<view class="jj-list__ft">
							<view class="label">中欧明睿新常态混合A</view>
							<view class="val">近1年涨跌幅<text>+15.52%</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="follow-card">
				<view class="title">关注<text>新能源+光伏+电子</text></view>
				<view class="follow-link">
					<view class="follow-sale">年度重磅新基正式开售</view>
					<view class="follow-go">GO<u-icon name="arrow-right" size="24" color="#fff"></u-icon>
					</view>
				</view>
			</view>
			<view class="product">
				<view class="product-head border flex-center">
					<view class="title">特色选基</view>
					<view class="product-dy">多种方法帮你发现更多基金</view>
				</view>
				<view class="product-body">
					<view class="product-grid">
						<u-grid :col="3" :border="false">
							<u-grid-item>
								<image src="../../static/uview/images/p-grid1.png" mode="" class="grid-icon"></image>
								<view class="grid-text">投资起跑线</view>
								<view class="grid-desc">打包投资尖子生</view>
							</u-grid-item>
							<u-grid-item>
								<image src="../../static/uview/images/p-grid2.png" mode="" class="grid-icon"></image>
								<view class="grid-text">指数红绿灯</view>
								<view class="grid-desc">低估买高估卖</view>
							</u-grid-item>
							<u-grid-item>
								<image src="../../static/uview/images/p-grid3.png" mode="" class="grid-icon"></image>
								<view class="grid-text">投资顺风车</view>
								<view class="grid-desc">每周热点机会</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
			<view class="product">
				<view class="product-head border flex-center">
					<view class="title">基金同路人</view>
					<view class="product-dy">在支付宝，1亿人与你一起投资基金</view>
				</view>
				<view class="product-body">
					<swiper class="same-swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item>
							<view class="same-box">
								<view class="same-flex flex-center">
									<image src="../../static/uview/images/user.png" class="avatar" mode=""></image>
									<view class="flex_bd">
										<view class="name">宝友uqycIn</view>
									</view>
									<view class="same-flex__ft">获得3个赞</view>
								</view>
								<view class="same-desc">兰兰真香</view>
								<view class="same-pic">
									<image src="../../static/uview/images/same-pic.png" mode=""></image>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="same-box">
								<view class="same-flex flex-center">
									<image src="../../static/uview/images/user.png" class="avatar" mode=""></image>
									<view class="flex_bd">
										<view class="name">宝友uqycIn</view>
									</view>
									<view class="same-flex__ft">获得3个赞</view>
								</view>
								<view class="same-desc">兰兰真香</view>
								<view class="same-pic">
									<image src="../../static/uview/images/same-pic.png" mode=""></image>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="same-box">
								<view class="same-flex flex-center">
									<image src="../../static/uview/images/user.png" class="avatar" mode=""></image>
									<view class="flex_bd">
										<view class="name">宝友uqycIn</view>
									</view>
									<view class="same-flex__ft">获得3个赞</view>
								</view>
								<view class="same-desc">兰兰真香</view>
								<view class="same-pic">
									<image src="../../static/uview/images/same-pic.png" mode=""></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="product">
				<view class="product-head border flex-center">
					<view class="title">基金财富号</view>
					<view class="product-dy">专业机构，服务直达</view>
				</view>
				<view class="product-body">
					<view class="com-cells">
						<view class="com-cell flex-center">
							<image src="../../static/uview/images/jg1.png" class="pic" mode=""></image>
							<view class="flex_bd">
								<view class="com-top flex-center">
									<view class="title ellipsis">国投瑞银基金财富号</view>
									<view class="tag">买入费率1折起</view>
								</view>
								<view class="desc">只有我心疼你的真金白银</view>
							</view>
						</view>
						<view class="com-cell flex-center">
							<image src="../../static/uview/images/jg2.png" class="pic" mode=""></image>
							<view class="flex_bd">
								<view class="com-top flex-center">
									<view class="title ellipsis">长信基金财富号</view>
									<view class="tag">买入费率1折起</view>
								</view>
								<view class="desc">有趣!有料!有我们!</view>
							</view>
						</view>
						<view class="com-cell flex-center">
							<image src="../../static/uview/images/jg3.png" class="pic" mode=""></image>
							<view class="flex_bd">
								<view class="com-top flex-center">
									<view class="title ellipsis">摩根士丹利华鑫基金财</view>
									<view class="tag">买入费率1折起</view>
								</view>
								<view class="desc">全球智慧，股债双赢</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ui-footer">
				<view class="ui-footer-company">基金销售服务由蚂蚁(杭州)基金销售有限公司提供</view>
				<view class="ui-footer-tip">本页面非任何法律文件，投资前请阅读基金合同、招募说明书。过往业绩不预示未来表现，市场有风险，投资需谨慎。</view>
				<u-divider color="#cbcbcb" half-width="96" border-color="#e1e1e1" bg-color="" fontSize="24">该页面由蚂蚁财富平台设计
				</u-divider>
			</view>
			<view class="help flex-center">
				<u-icon name="edit-pen-fill" color="#fff" size="44"></u-icon>
				<view>求助反馈</view>
			</view>
		</view>
		<u-tabbar v-model="current" inactive-color="#868686" active-color="#3270f5" :list="list"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					iconPath: "../../static/uview/images/j1.png",
					selectedIconPath: "../../static/uview/images/j1_on.png",
					text: '市场',
					pagePath: '/pages/fund/index',
				}, {
					iconPath: "../../static/uview/images/j3.png",
					selectedIconPath: "../../static/uview/images/j3_on.png",
					text: '自选',
					pagePath: '/pages/fund/optional',
				}, {
					iconPath: "../../static/uview/images/j2.png",
					selectedIconPath: "../../static/uview/images/j2_on.png",
					text: '持有',
					pagePath: '/pages/fund/hold',
				}, ],
				current: 0,
				background: {
					backgroundColor: '#3476fe'
				},
				customStyle: {
					padding: "12rpx 0"
				},
				grid: [{
					img: '../../static/uview/images/nav/nav1.png',
					title: '基金排行'
				}, {
					img: '../../static/uview/images/nav/nav2.png',
					title: '热门板块'
				}, {
					img: '../../static/uview/images/nav/nav3.png',
					title: '新发基金',
					tip: '重磅新发'
				}, {
					img: '../../static/uview/images/nav/nav4.png',
					title: '省心定投'
				}, {
					img: '../../static/uview/images/nav/nav5.png',
					title: '投顾管家'
				}, {
					img: '../../static/uview/images/nav/nav6.png',
					title: '金选好基'
				}, {
					img: '../../static/uview/images/nav/nav7.png',
					title: '金牌经理'
				}, {
					img: '../../static/uview/images/nav/nav8.png',
					title: '偏股基金'
				}, {
					img: '../../static/uview/images/nav/nav9.png',
					title: '指数基金'
				}, {
					img: '../../static/uview/images/nav/nav10.png',
					title: '指数基金'
				}],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				tab: [{
					name: '我想赚更多'
				}, {
					name: '我要更安稳'
				}],
				active: 0
			}
		},
		computed: {},
		onShow() {},
		methods: {
			change(index) {
				this.active = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.slot-right {
		padding-right: 30rpx;

		.btn {
			display: inline-block;
			background-color: transparent;
			height: 64rpx;
			padding: 0;
			line-height: 1.8;
			margin-left: 30rpx;
			vertical-align: middle;
		}
	}

	.content {
		padding: 20rpx 24rpx;
		position: relative;
	}

	.content::after {
		position: absolute;
		content: '';
		width: 140%;
		height: 460rpx;
		left: -20%;
		top: 0;
		border-radius: 0 0 50% 50%;
		background: #3476fe;
	}

	.ui-box {
		position: relative;
		z-index: 11;
		padding-top: 46rpx;
		display: flex;

		.ui-pic {
			width: 290rpx;
			margin-right: 30rpx;

			image {
				width: 100%;
				display: block;
				height: 244rpx;
			}
		}

		.ui-content {
			padding-top: 10rpx;

			.ui-hi {
				font-size: 44rpx;
				color: #fff;
				margin-bottom: 8rpx;
			}

			.ui-gift {
				font-size: 36rpx;
				color: #fff;
				margin-bottom: 30rpx;
			}

			.find-btn {
				background-color: #fff;
				font-size: 26rpx;
				width: 170rpx;
				color: #3c6ada;
				padding: 0;
				line-height: 62rpx;
				height: 62rpx;
			}
		}
	}

	.nav-bar {
		background-color: #fff;
		border-radius: 16rpx;
		position: relative;
		z-index: 11;
		margin-bottom: 44rpx;
		padding: 10rpx 0;
		margin-bottom: 20rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #202020;
	}

	.grid-icon {
		width: 50rpx;
		height: 50rpx;
		display: block;
	}

	.grid-tip {
		font-size: 20rpx;
		color: #fff;
		line-height: 30rpx;
		padding: 0 10rpx;
		border-radius: 16rpx;
		position: absolute;
		right: -56rpx;
		z-index: 111;
		background-color: #fa4139;
		top: 0;
	}

	.swiper {
		height: 270rpx;
	}

	.swiper /deep/ .uni-swiper-dots {
		width: 48rpx !important;
		background-color: #d9d9d9;
		height: 8rpx;
		border-radius: 4rpx;
		bottom: 14rpx;
	}

	.swiper /deep/ .uni-swiper-dot {
		height: 8rpx;
		width: 18rpx;
		margin: 0;
		border-radius: 4rpx;
		background-color: #d9d9d9;
	}

	.swiper /deep/ .uni-swiper-dot.uni-swiper-dot-active {
		width: 30rpx;
		background-color: #2c69f7;
	}

	.work-bar {
		background-color: #fff;
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.work-box {
		background: url(../../static/uview/images/work-bg.png) no-repeat right bottom #fff;
		background-size: 100% 334rpx;
		padding: 40rpx 50rpx 50rpx;

		.work-tag {
			width: 126rpx;
			height: 34rpx;
			font-size: 0;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 40rpx;
			color: #3377eb;
			margin-bottom: 40rpx;
		}

		.question {
			font-size: 32rpx;
			color: #323232;
			margin-bottom: 6rpx;
		}

		.answer {
			font-size: 24rpx;
			color: #959595;
		}

		.go-btn {
			height: 88rpx;
			font-size: 34rpx;
			color: #fff;
			background-color: #3476fe;
			margin-top: 78rpx;
		}
	}

	.w-swiper {
		height: 480rpx;
	}

	.w-swiper /deep/ .uni-swiper-dots {
		bottom: 12rpx;
	}

	.w-swiper /deep/ .uni-swiper-dot {
		height: 8rpx;
		width: 8rpx;
		margin: 0 4rpx;
		border-radius: 4rpx;
		background-color: #ead8dd;
	}

	.w-swiper /deep/ .uni-swiper-dot.uni-swiper-dot-active {
		width: 28rpx;
		background-color: #3673ff;
	}

	.product {
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 16rpx;
	}

	.product-head {
		padding: 24rpx 0;

		.logo {
			width: 180rpx;
			height: 32rpx;
			display: block;
			margin-right: 12rpx;
		}

		.title {
			font-size: 28rpx;
			color: #151515;
			line-height: 32rpx;
			margin-right: 12rpx;
		}

		.product-dy {
			font-size: 24rpx;
			color: #929292;
			line-height: 1;
			padding-left: 8rpx;
			border-left: 2rpx solid #9f9f9f;

			.dot {
				margin: 0 8rpx;
				display: inline-block;
				width: 4rpx;
				height: 4rpx;
				background-color: #929292;
				vertical-align: middle;
			}
		}
	}

	.tab-width {
		margin: 0 -20rpx;
	}

	.product {
		margin-bottom: 20rpx;
	}

	.product-body {
		.tab-head {
			margin-bottom: 10rpx;
		}

		.notice {
			background-color: #fdf7e7;
			padding: 24rpx 20rpx;
			border-radius: 6rpx;

			.title {
				font-size: 24rpx;
				color: #463623;
				line-height: 36rpx;
			}

			.arrow-right {
				margin-left: 10rpx;
			}
		}
	}

	.ui-footer {
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 20rpx 30rpx 30rpx;

		.ui-footer-company {
			color: #999999;
		}

		.ui-footer-tip {
			color: #d1d1d1;
			margin: 6rpx 0;
		}
	}

	.follow-card {
		padding: 40rpx 40rpx 40rpx 20rpx;
		border-radius: 12rpx;
		line-height: 1.2;
		background: url(../../static/uview/images/follow-bg1.png) no-repeat right 30rpx center #fff;
		background-size: 170rpx 150rpx;
		margin-bottom: 30rpx;

		.title {
			font-size: 34rpx;
			color: #2f2f2f;
			margin-bottom: 18rpx;

			text {
				color: #ed7731;
			}
		}

		.follow-link {
			display: flex;
			align-items: center;
			margin-right: 14rpx;
		}

		.follow-sale {
			font-size: 28rpx;
			color: #a0a0a0;
			margin-right: 16rpx;
		}

		.follow-go {
			background-color: #ee7a35;
			color: #fff;
			font-size: 20rpx;
			border-radius: 15rpx;
			line-height: 30rpx;
			height: 30rpx;
			padding: 0 14rpx;
		}
	}

	.tab-cell:last-child {
		border-bottom: 0;
	}

	.tab-cell {
		padding: 38rpx 0;
		border-bottom: 1rpx solid #f6f6f6;

		.tab-cell__hd {
			width: 142rpx;
			font-size: 0;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 166rpx;
			}
		}

		.tab-cell__bd {
			.name {
				font-size: 26rpx;
				color: #171717;
			}

			.stock {
				font-size: 24rpx;
				color: #959595;
				margin-bottom: 10rpx;
			}

			.val {
				font-size: 32rpx;
				color: #191919;
			}

			.label {
				font-size: 24rpx;
				color: #959595;
			}

			.text-danger {
				color: #e8344a;
			}
		}
	}

	.panel {
		background-color: #fff;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;

		.panel-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 0;
			border-bottom: 2rpx solid #fafafa;

			.title {
				font-size: 30rpx;
				color: #313131;
			}
		}
	}

	.jj-cell:last-child {
		border-bottom: 0;
	}

	.jj-cell {
		padding: 38rpx 0;
		border-bottom: 2rpx solid #fafafa;

		.icon {
			width: 50rpx;
			height: 50rpx;
			display: block;
			margin-right: 24rpx;
		}

		.name {
			font-size: 28rpx;
			color: #000000;
		}

		.jj-list__ft {
			line-height: 34rpx;

			.label {
				font-size: 24rpx;
				color: #262626;
			}

			.val {
				font-size: 24rpx;
				color: #848484;

				text {
					color: #f7253e;
				}
			}
		}
	}

	.product-grid {
		padding: 10rpx 0;

		.grid-icon {
			width: 54rpx;
			height: 54rpx;
		}

		.grid-text {
			font-size: 26rpx;
			margin-top: 16rpx;
			margin-bottom: 8rpx;
		}

		.grid-desc {
			font-size: 24rpx;
			color: #868686;
		}
	}

	.border {
		border-bottom: 1rpx solid #f8f8f8;
	}

	.com-cell {
		padding: 32rpx 20rpx;
		border-bottom: 1rpx solid #f8f8f8;

		.pic {
			width: 86rpx;
			height: 86rpx;
			display: block;
			margin-right: 44rpx;
		}

		.com-top {
			margin-bottom: 12rpx;
		}

		.title {
			font-size: 32rpx;
			color: #3c3c3c;
			margin-right: 10rpx;
		}

		.tag {
			font-size: 18rpx;
			line-height: 30rpx;
			padding: 0 6rpx;
			border-radius: 4rpx;
			background-color: #f4f0fd;
			color: #4c75e3;
			white-space: nowrap;
		}

		.desc {
			font-size: 24rpx;
			color: #979797;
		}
	}

	.com-cell:last-child {
		border-bottom: 0;
	}

	.same-swiper {
		height: 540rpx;
	}
	
	.same-flex{
		margin-bottom: 30rpx;
		.avatar{
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin-right: 16rpx;
		}
		
		.name{
			font-size: 28rpx;
			color: #1b1b1b;
		}
		
		.same-flex__ft{
			font-size: 24rpx;
			color: #8e8e8e;
		}
	}
	
	.same-desc{
		font-size: 26rpx;
		color: #323232;
		margin-bottom: 30rpx;
	}
	
	.same-pic{
		height: 290rpx;
		
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.same-box{
		padding-top: 20rpx;
	}
	
	.same-swiper /deep/ .uni-swiper-dot {
		height: 8rpx;
		width: 8rpx;
		margin: 0 4rpx;
		border-radius: 4rpx;
		background-color: #cfcfcf;
	}
	
	.same-swiper /deep/ .uni-swiper-dot.uni-swiper-dot-active {
		width: 28rpx;
		background-color: #3673ff;
	}
	
	.help{
		font-size: 24rpx;
		color: #fff;
		line-height: 30rpx;
		padding: 12rpx 24rpx;
		background-color: rgba(0,0,0,0.6);
		position: fixed;
		border-radius: 4rpx;
		right: 0;
		bottom: 20%;
		width: 154rpx;
		
		.u-icon{
			margin-right: 12rpx;
		}
	}
</style>
